<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="style/styles.css" rel="Stylesheet"/>
<link type="text/css" href="style/kf8.css" media="amzn-kf8" rel="Stylesheet"/>
<link type="text/css" href="style/mobi.css" media="amzn-mobi" rel="Stylesheet"/>
</head>
<body>
	<h1>Images in KF8</h1>
	<p class="description">This chapter illustrates some of the possible styles for images.</p>

	<section>
	<h2 id="id1">Simple Images</h2>
	<p class="description">We normally add images as part of the content. Images can be added to the content at any point.</p>

	<p class="subtitle">Example:</p>
	<p class="exampleBorder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare sagittis leo vitae lacinia. Nullam id lorem eget nisi hendrerit placerat nec nec ipsum. Proin a quam nunc, ac scelerisque justo. Aliquam erat urna, varius ut blandit a, mattis quis mi. Fusce pretium ligula vel diam vulputate sodales. Duis sit amet erat rhoncus urna tempus egestas. <img src="images/flower3.jpg" width=50 height=50/> Aliquam sollicitudin dui elit, nec tristique lorem. Etiam consectetur nisi non ligula pulvinar porta. Proin eget lectus enim. In augue turpis, laoreet quis elementum mattis, elementum sed libero. Mauris ullamcorper convallis elementum. Vivamus dignissim dignissim ante, sed cursus ipsum hendrerit a. Cras ac magna sit amet quam venenatis semper. Vestibulum fringilla, orci sit amet congue tincidunt, odio purus suscipit eros, in lacinia ligula augue vestibulum quam. Nullam mollis lectus in urna sagittis ultrices.<br/> <img src="images/dog.gif"/> Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula. Curabitur congue dignissim velit eu egestas. Mauris eget turpis nec ipsum pellentesque consequat eu nec orci. Donec eget nibh id ligula bibendum molestie non non turpis. Aenean justo odio, accumsan eu tristique a, consequat et tortor. Suspendisse dignissim elit a est viverra semper ac vitae neque. Vivamus vel augue quis orci viverra pharetra varius a dolor.</p>
	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To add an image to the content, use the <span class="key">img</span> tag.</p>
	</section>

	<section>
	<h2 id="id2">Floating Image</h2>
		<h3>Left floating image</h3>
		<p class="description">Using CSS, we can make an image float to the left of the text. The text will wrap around the image.</p>

		<p class="subtitle">Example:</p>
		<div class="exampleBorder">
			<p><img src="images/fl2.jpg" class="float_left"/> Lorem ipsum donec tincidunt tellus pellentesque leo semper venenatis. Vivamus fringilla sem lectus. Cras dignissim iaculis leo sit amet ultricies. Donec porta fermentum lorem vel blandit. Praesent tincidunt vulputate orci eu posuere. Pellentesque id laoreet libero. Morbi ullamcorper, lectus nec rutrum aliquet, elit erat rutrum lorem, sit amet pulvinar est dolor volutpat erat. Donec vitae nulla mauris, ut lobortis neque.Nullam luctus feugiat quam, ut mattis arcu laoreet at. Suspendisse purus magna, porttitor varius cursus eget, eleifend non tellus. Etiam facilisis elementum nunc et sollicitudin. Nunc at magna tortor, ac bibendum libero. Nam vulputate orci nec arcu imperdiet molestie eu ac erat. Nam scelerisque consequat venenatis. Aenean varius aliquet sollicitudin. Vivamus justo risus, lobortis ac eleifend at, euismod a dui. Cras id eleifend nisi. Morbi sit amet erat nec nunc vehicula pharetra.</p>
		<p class="null_text_indent">Sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula. <img src="images/fl4.jpg" class="float_left"/>Nullam justo tortor, ultricies et scelerisque pharetra, pharetra id nulla. Quisque vulputate, est vel luctus feugiat, magna lacus cursus elit, ut ultricies lectus justo ut quam. Phasellus suscipit viverra elit, nec bibendum mi tempor sit amet. Integer at diam at ipsum congue vestibulum. Integer nec lacus sem. Integer id convallis ante. In vitae magna lorem. Pellentesque vitae turpis nec tortor malesuada pretium non non lacus. Donec urna urna, consectetur nec cursus in, aliquet ac eros. Nunc dolor nisi, vulputate sed luctus sit amet, ultrices et tellus. Pellentesque urna velit, tincidunt in tristique a, interdum quis nunc.</p>
		</div>

		<p class="subtitle">How To:</p>
		<p class="howtoBorder">To float an image to the left, use the <span class="key">float:left</span> CSS styling property.</p>

		<h3>Right floating image</h3>

		<p class="description">Images can be floated to the right of the text.</p>
		<p class="subtitle">Example:</p>
		<p class="exampleBorder">Lorem ipsum morbi nisl magna, porttitor vestibulum scelerisque vitae, vestibulum eget dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id leo nunc, eu pulvinar dui. Etiam nec dolor eu elit molestie scelerisque.<img src="images/bird2.jpg" class="float_right"/> Integer in sapien orci. Nunc lobortis, urna eget congue convallis, quam lacus accumsan libero, eget feugiat elit ipsum ac leo. Suspendisse quis massa nec dolor posuere luctus.Sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula. Curabitur congue dignissim velit eu egestas. Mauris eget turpis nec ipsum pellentesque consequat eu nec orci. Donec eget nibh id ligula bibendum molestie non non turpis. Aenean justo odio, accumsan eu tristique a, consequat et tortor. Suspendisse dignissim elit a est viverra semper ac vitae neque. Vivamus vel augue quis orci viverra pharetra varius a dolor. Donec ipsum turpis, facilisis eget lacinia eu, luctus at dolor. Curabitur nulla mauris, porta non elementum at, imperdiet a velit. </p>

		<p class="subtitle">How To:</p>
		<p class="howtoBorder">To float an image to the right, use the <span class="key">float:right</span> CSS styling property.</p>

	<h3>Image alignment</h3>
	<p class="description">Images in the text can be aligned left or right as needed. The text will wrap around the image.</p>
	<p class="subtitle">Example:</p>
	<p class="exampleBorder">Lorem ipsum curabitur congue dignissim velit eu egestas. Mauris eget turpis nec ipsum pellentesque consequat eu nec orci. Donec eget nibh id ligula bibendum molestie non non turpis. Aenean justo odio, accumsan eu tristique a, consequat et tortor. Suspendisse dignissim elit a est viverra semper ac vitae neque. Vivamus vel augue quis orci viverra pharetra varius a dolor.<img src="images/butterfly3.jpg" align="left" class="margin"/> Donec ipsum turpis, facilisis eget lacinia eu, luctus at dolor. Curabitur nulla mauris, porta non elementum at, imperdiet a velit. Suspendisse in orci adipiscing lectus tempor molestie ac a nibh. Ut malesuada sapien luctus risus laoreet non lobortis erat porta. Mauris ante purus, tincidunt a condimentum sit amet, sagittis auctor turpis. Ut fringilla velit eget orci porta at ultricies magna faucibus. Donec neque nibh, tincidunt vitae iaculis id, porttitor sit amet lacus.</p>

	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To align an image, set the values of the <span class="key">img</span> tag attribute <span class="key">align</span>. Attribute values can be <span class="key">left, right, middle, bottom,</span> or <span class="key">top</span>.
	<br/>
	<code>align="left"</code></p>
	</section>

	<section class="bgimg1">
	<h2 id="id3">Background Images</h2>
	<p class="description">Images can be used as a background to the content.</p>
	<p class="null_text_indent">For a detailed explanation of background images, please see the <a href="background.html#id2">Background Images</a> section.</p>
	</section>

	<section>
	<h2 id="id4">Image Styling</h2>
	<p class="description">Different styles can be applied to the images with CSS styling properties.</p>
	<h3>Image border</h3>
	<p class="description">Images can have different styles of border. Border styling can vary with size, shape, etc.</p>
	<h4>Border size</h4>
	<p class="description">Image border size can be set as desired.</p>
	<p class="subtitle">Example:</p>
	<div class="exampleBorder">
	<figure>
		<img src="images/amazon_tree.gif" width=60 height=80 border=1/>
		<img src="images/amazon_tree.gif" width=60 height=80 border=2/>
		<img src="images/amazon_tree.gif" width=60 height=80 border=3/>
	</figure>
	</div>
	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To add border to an image, use the <span class="key">border</span> attribute. The borders of the images above are set with values of 1, 2, and 3, respectively.<br/><code>border=2</code></p>

	<h4>Border colors</h4>
	<p class="description">Image borders can be set to different colors using CSS styling properties.</p>
	<p class="subtitle">Example:</p>
	<div  class="exampleBorder">
	<figure>
		<img src="images/amazon_tree.gif" width=60 height=80 border=2 class="border_color_red"/>
		<img src="images/amazon_tree.gif" width=60 height=80 border=2 class="border_color_green"/>
		<img src="images/amazon_tree.gif" width=60 height=80 border=2 class="border_color_blue"/>
	</figure>
	</div>

	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To set the color of the border, use the <span class="key">border-color</span> CSS property.
	<br/>
	<code>style="border-color:red"</code></p>

	<h4>Rounded border</h4>
	<p class="description">A rounded border for an image can be set by using CSS styling properties. By adjusting CSS property values, different shapes of borders can be achieved. Changing the values of other properties changes styles such as background color and border style.</p>
	<p class="subtitle">Example:</p>
	<div class="exampleBorder">
	<img src="images/amazon_tree.gif" width=120 height=160 class="border1"/>
	<img src="images/amazon_tree.gif" width=120 height=160 class="border2"/>
	<img src="images/amazon_tree.gif" width=120 height=160 class="border3"/>
	<img src="images/amazon_tree.gif" width=120 height=160 class="border4"/>
	<img src="images/amazon_tree.gif" width=120 height=160 class="border5"/>
	</div>

	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To set these types of styles, use the <span class="key">border, padding, background,</span> and <span class="key">border-radius</span> CSS properties.
	<br/>
	<code>
	img.border1<br/>
	{<br/>
		border:.2em solid #a1a1a1;<br/>
		padding:10px 10px; <br/>
		background:#dddddd;<br/>
		border-radius:10px;<br/>
	}</code></p>
	</section>

	<section>
	<h2 id="id5">Image Transformation</h2>
	<p class="description">An original image can be transformed to a different style by using CSS styling properties. The size of the image can be changed to fit the content.</p>

	<h3>Image resizing</h3>
	<p class="description">An image can be displayed in any size by specifying the display size.</p>
	<p class="subtitle">Example:</p>
	<div class="exampleBorder">
	<p class="null_text_indent">The original image <img src="images/sun1.jpg"/></p>
	<img src="images/sun1.jpg" width=20 height=10/>
	<img src="images/sun1.jpg" width=40 height=20/>
	<img src="images/sun1.jpg" width=80 height=40/>
	<img src="images/sun1.jpg" width=160 height=80/>
	<img src="images/sun1.jpg" width=320 height=160/>
	<p class="null_text_indent">The same image file is displayed in different sizes to suit the content.</p>
	</div>

	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To resize an image, use the <span class="key">width</span> and <span class="key">height</span> attributes in the <span class="key">img</span> tag.</p>

	<h3>Image rotation</h3>
	<p class="description">An original image can be rotated to any angle by using CSS styling properties.</p>
	<p class="subtitle">Example:</p>
	<div class="exampleBorder" style="height:210px;">
	<div class="translate1">
		<div class="rotate1">
			<img src="images/tlook.jpg" width=10 height=10 border=1/>
		</div>
	</div>
	<div class="translate2">
		<div class="rotate2">
			<img src="images/tlook.jpg" width=20 height=20 border=1/>
		</div>
	</div>
	<div class="translate3">
		<div class="rotate3">
			<img src="images/tlook.jpg" width=40 height=40 border=1/>
		</div>
	</div>
	<div class="translate4">
		<div class="rotate4">
			<img src="images/tlook.jpg" width=80 height=80 border=1/>
		</div>
	</div>
	<div class="translate5">
		<div class="rotate5">
			<img src="images/tlook.jpg" width=160 height=160 border=1/>
		</div>
	</div>
	</div>

	<p class="subtitle">How To:</p>
	<p class="howtoBorder">In this example, a single image file is displayed in different sizes by using the <span class="key">width</span> and <span class="key">height</span> attributes of the <span class="key">img</span> tag. To rotate and place the image, two <span class="key">div</span> tags are used with CSS styling. One <span class="key">div</span> tag is used to place the image at the correct position by using the <span class="key">translate</span> CSS function. Another <span class="key">div</span> tag is used to rotate the image by using the <span class="key">rotate</span> CSS function.<br/>
	<code>
		&lt;div style="-webkit-transform : translate(0px,150px); "&gt;<br/>
		&lt;div style="width:10px; height:10px; -webkit-transform : rotate(216deg); float:left; "&gt;<br/>
			&lt;img src="images/tlook.jpg" width=10 height=10 border=1&gt;&lt;/img&gt;<br/>
		&lt;/div&gt;<br/>
		&lt;/div&gt;<br/>
	</code>
	</p>

	<h3>Y axis rotation</h3>
	<p class="description">Similarly, images also can be rotated along the X or Y axis by using CSS styling properties.</p>
	<p class="subtitle">Example:</p>
	<div class="exampleBorder" style="height:100px;">
		<div class="rotateY1">
			<img src="images/bird.jpg" width=100 height=100/>
		</div>
		<div class="rotateY2">
			<img src="images/bird.jpg" width=100 height=100/>
		</div>
		<div class="rotateY3">
			<img src="images/bird.jpg" width=100 height=100/>
		</div>
		<div class="rotateY4">
			<img src="images/bird.jpg" width=100 height=100/>
		</div>
		<div class="rotateY5">
			<img src="images/bird.jpg" width=100 height=100/>
		</div>
		<div class="rotateY6">
			<img src="images/bird.jpg" width=100 height=100/>
		</div>
	</div>

	<p class="subtitle">How To:</p>
	<p class="howtoBorder">To rotate the image, use the <span class="key">div</span> tag with the <span class="key">rotateX</span> or <span class="key">rotateY</span> CSS property.</p>

	<h3>Other transformations</h3>
	<p class="description">Other CSS transformations are available, such as skewing and scaling the images.</p>

	</section>

	<section>
	<h2 id="id6">Scalable Vector Graphics</h2>
	<p class="description">Scalable Vector Graphics (SVG) images can be added to the content by different methods.</p>
	<p class="subtitle">Example:</p>
	<img class="mobicontent" src="images/circles.jpg" height="150" width="150"/>
	<img class="defaultcontent" src="images/circles.svg" class="exampleBorder"/>
	<p class="subtitle">How To:</p>
	<p class="howtoBorder">This image is an external SVG file. It is added by using the <span class="key">img</span> tag. SVG images can be embedded into the content by using the <span class="key">embed</span> tag.</p>
	</section>
</body>
</html>
